<template>
	<view class="map-page">
		<view class="map-section">
			<map style="width: 100%;":style="{height:windowHeight + 'px'}" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<view class="gps-section" @click="openThreeMap()">
			导航区域
		</view>
	</view>
</template>

<script>
	//引入打开第三方地图js
	import Map from '../../../static/js/openMap.js'
	export default {
		data() {
			return {
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				markers: [{
				    width : 40,
				    height: 40,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/images/marker_point.png'
				}],
				windowHeight: ''
			}
		},
		created() {
			this.setWindowHeight()
		},
		methods: {
			setWindowHeight: function(){
				let sysInfo = uni.getSystemInfoSync().windowHeight
				let height = sysInfo - 80
				this.windowHeight = height
			},
			openThreeMap: function(){
				let latitude = this.latitude
				let longitude = this.longitude
				/**APP端跳转至百度地图（第三方软件）；若无，则跳转至高德地图（第三方软件）；若均无，则打开腾讯地图（uni自带方法：uni.openLocation） 其它端打开腾讯地图（uni自带方法：uni.openLocation）
				 *  atitude	纬度（默认GCJ-02坐标系）	Float
				 *	longitude	经度（默认GCJ-02坐标系）	Float
				 *	name	地图标注名称	String
				 *	coord_type	坐标类型，可选参数。示例：gcj02、bd09、wgs84	String
				 */
				Map.openMap(latitude, longitude, '导航', 'gcj02')
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.map-page {
		display: flex;
		flex-flow: column;
		flex-wrap: wrap;
		height: 100%;
		.map-section {
			flex: 1;
		}
		.gps-section {
			height: 80px;
		}
	}

</style>
